<template>
  <div class="filter-bar">
    <el-input
      v-if="showSearch"
      v-model="localSearchQuery"
      :placeholder="getSearchPlaceholder"
      class="search-input"
      @input="updateSearchQuery"
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>

    <el-select
      v-if="showTags"
      v-model="localSelectedTags"
      placeholder="选择标签"
      multiple
      :multiple-limit="3" 
      collapse-tags
      collapse-tags-tooltip
      clearable
      class="tag-filter"
      @change="updateSelectedTags"
    >
      <el-option
        v-for="tag in tags"
        :key="tag"
        :label="tag"
        :value="tag"
      />
    </el-select>

    <el-select
      v-if="showStatus"
      v-model="localStatus"
      placeholder="全部"
      class="status-filter"
      @change="updateStatus"
    >
      <template v-if="isUser">
        <el-option label="全部" value="1" />
        <el-option label="正常" value="2" />
        <el-option label="已冻结" value="0" />
      </template>
      <template v-else-if="isReport">
        <el-option label="全部" value="1" />
        <el-option label="已处理" value="2" />
        <el-option label="未处理" value="0" />
      </template>
      <template v-else>
        <el-option label="全部" value="1" />
        <el-option label="已上架" value="2" />
        <el-option label="已下架" value="0" />
      </template>
    </el-select>

    <el-select
      v-if="showSort"
      v-model="localSortBy"
      placeholder="排序方式"
      class="sort-filter"
      @change="updateSortBy"
    >
      <el-option label="最新发布" value="newest" />
      <el-option label="最多点赞" value="mostLiked" />
      <el-option label="评分最高" value="highestRated" />
    </el-select>
  </div>
</template>

<script setup>
import { ref, watch, toRefs, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

const props = defineProps({
  searchQuery: String,
  selectedTags: Array,
  sortBy: String,
  status: String,
  tags: Array,
  showSearch: Boolean,
  showTags: Boolean,
  showSort: Boolean,
  showStatus: Boolean,
  isReport: Boolean,
  isUser: Boolean,
  isAdmin: Boolean
})

const emit = defineEmits([
  'update:searchQuery', 
  'update:selectedTags', 
  'update:sortBy',
  'update:status'
])

const { searchQuery, selectedTags, sortBy, status } = toRefs(props)

const localSearchQuery = ref(searchQuery.value)
const localSelectedTags = ref(selectedTags.value)
const localSortBy = ref(sortBy.value)
const localStatus = ref(status.value)

const getSearchPlaceholder = computed(() => {
  if (props.isUser) {
    return '搜索用户名'
  }
  if (props.isAdmin) {
    return '搜索管理员'
  }
  return '搜索书名/作者'
})

const updateSearchQuery = () => {
  emit('update:searchQuery', localSearchQuery.value)
}

const updateSelectedTags = () => {
  emit('update:selectedTags', localSelectedTags.value)
}

const updateSortBy = () => {
  emit('update:sortBy', localSortBy.value)
}

const updateStatus = () => {
  emit('update:status', localStatus.value)
}

watch(searchQuery, (newVal) => {
  localSearchQuery.value = newVal
})

watch(selectedTags, (newVal) => {
  localSelectedTags.value = newVal
})

watch(sortBy, (newVal) => {
  localSortBy.value = newVal
})

watch(status, (newVal) => {
  localStatus.value = newVal
})
</script>

<style scoped>
.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  width: 150px;
}

.tag-filter {
  width: 150px;
}

.sort-filter {      
  width: 100px;
}

.status-filter {
  width: 100px;
}
</style> 